<!-- 交易 -->
<template>
  <view class="t-container">
    <!-- title -->

    <t-header :showLeft="false">
			交易
      <template #right>
        <uni-icons
          type="search"
          size="24"
          color="#ffffff"
          class="arrow-left-icon"
          @click="onSearch()"
        />
      </template>
		</t-header>

    <view class="t-content">
      <!-- 交易资产 -->
      <view class="t-ta">
        <view class="t-ta-te">
          <view class="text">交易资产</view>
          <template v-if="isShowTa">
            <img
              src="@/static/images/opene.png"
              alt=""
              @click="isShowTa = !isShowTa"
            />
          </template>
          <template v-else>
            <img
              src="@/static/images/closee.png"
              alt=""
              @click="isShowTa = !isShowTa"
            />
          </template>
        </view>
        <view class="t-ta-amount">
          <template v-if="isShowTa">
            <text class="t-taa-icon">¥</text>
            <text>&nbsp;</text>
            <text class="t-taa-num">{{
              accoutMoney.property_money_total || '0.00'
            }}</text>
          </template>
          <template v-else>
            <text class="t-taa-num">******</text>
          </template>
        </view>
        <view class="t-ta-line"></view>
        <view class="flex flex-wrap">
          <view class="text-left col-3">
            <view class="t-ta-label">现金可用</view>
            <template v-if="isShowTa">
              <view class="t-ta-value"
                >￥{{ accoutMoney.balance || '0.00' }}</view
              >
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
          <view class="text-left col-3">
            <view class="t-ta-label">持仓盈亏</view>
            <template v-if="isShowTa">
              <view class="t-ta-value">￥{{ accoutMoney.fdyk || '0.00' }}</view>
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
          <view class="text-left col-3">
            <view class="t-ta-label">现金可取</view>
            <template v-if="isShowTa">
              <view class="t-ta-value">
                ￥{{
                  (accoutMoney.balance - accoutMoney.freeze_profit).toFixed(2) >
                  0
                    ? (accoutMoney.balance - accoutMoney.freeze_profit).toFixed(
                        2
                      )
                    : '0.00'
                }}
              </view>
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
          <view class="text-left col-3 padding-tb-sm">
            <view class="t-ta-label">交易市值</view>
            <template v-if="isShowTa">
              <view class="t-ta-value"
                >￥{{ accoutMoney.city_value || '0.00' }}</view
              >
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
          <view class="text-left col-3 padding-tb-sm">
            <view class="t-ta-label">交易盈亏</view>
            <template v-if="isShowTa">
              <view class="t-ta-value"
                >￥{{ accoutMoney.totalyk || '0.00' }}</view
              >
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
          <view
            v-if="sysConfig.is_weituo == 1"
            class="text-left col-3 padding-tb-sm"
          >
            <view class="t-ta-label">委托冻结</view>
            <template v-if="isShowTa">
              <view class="t-ta-value"
                >￥{{ accoutMoney.weituozj || '0.00' }}</view
              >
            </template>
            <template v-else>
              <view class="t-ta-value">****</view>
            </template>
          </view>
        </view>
      </view>
      <!-- tabs -->
      <view class="tabs" v-if="sysConfig.is_weituo == 1">
        <tui-tabs
          @change="changTab"
          :currentTab="tabIndex"
          :tabs="tabs"
          :size="32"
          itemWidth="50%"
          selectedColor="#f42f3c"
          sliderBgColor="#f42f3c"
          style="width: 100%"
        />
      </view>
      <!-- swiper -->
      <view class="list-con rel">
        <swiper
          :style="{ height: `${height}rpx` }"
          :current="tabIndex"
          @change="swiperChange"
        >
          <swiper-item v-for="(tab, i) in tabs" :key="i">
            <component :is="tab.comp" :ref="`compRef${i}`" :height="height" />
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, shallowRef } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';

  // components
  import MescrollItem0 from './components/tradeSwiperItem0.vue';
  import MescrollItem1 from './components/tradeSwiperItem1.vue';

  // api
  import { getUserPriceAll1, getUserPriceAll } from '@/api/user.js';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  onShow(() => {
    getMoney();
    swiperChange({ detail: { current: 0 } });
  });

  const height = ref(0);
  const sysConfig = ref({});

  onLoad(() => {
    // height.value = uni.getSystemInfoSync().windowHeight - uni.upx2px(445 * 2) + 'px';
    height.value = 734;

    if (uni.getStorageSync('sysConfig')) {
      sysConfig.value = uni.getStorageSync('sysConfig');
    }
  });
	
	// 搜索
	const onSearch = () => {
	  uni.navigateTo({
	    url: '/pages/search/index',
	  });
	};

  // 是否显示交易资产
  const isShowTa = ref(true);

  const toShareSearch = () => {
    uni.navigateTo({
      url: '/pages/shares/search',
    });
  };

  const accoutMoney = ref({});

  const getMoney = () => {
    getUserPriceAll1().then((res) => {
      accoutMoney.value = res.data.list;
    });
  };

  const comp0 = shallowRef(MescrollItem0);
  const comp1 = shallowRef(MescrollItem1);

  const tabIndex = ref(0);
  const tabs = ref([
    { name: '我的持仓', comp: comp0 },
    { name: '委托订单', comp: comp1 },
  ]);

  const compRef0 = ref(null);
  const compRef1 = ref(null);

  const changTab = (e) => {
    tabIndex.value = e.index;
    if (e.index === 0) {
      compRef0.value[0].getListFn();
    } else if (e.index === 1) {
      compRef1.value[0].getListFn();
    }
  };

  const swiperChange = (e) => {
    tabIndex.value = e.detail.current;
    if (e.detail.current === 0) {
      compRef0.value[0].getListFn();
    } else if (e.detail.current === 1) {
      compRef1.value[0].getListFn();
    }
  };
</script>

<style lang="scss" scoped>
  .t-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(100vh - 100rpx);
    box-sizing: border-box;

    .t-content {
      padding: 0 18rpx 18rpx;
    }

    .t-ta {
      width: 100%;
      height: 462rpx;
      margin-bottom: 20rpx;
      padding: 40rpx 52rpx 28rpx;
      border-radius: 34rpx;
      background: linear-gradient(171deg, #ff7e3e 0%, #f62645 100%);
      box-sizing: border-box;

      .t-ta-te {
        display: flex;
        align-items: center;
        margin-bottom: 18rpx;

        .text {
          margin-right: 36rpx;
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 500;
          font-family: PingFangSC, PingFang SC;
        }
      }

      .t-ta-amount {
        color: #fff7b4;
        font-size: 32rpx;

        .t-taa-num {
          font-size: 64rpx;
        }
      }

      .t-ta-line {
        width: 100%;
        height: 2px;
        margin: 36rpx 0 26rpx;
        border: 1px solid rgba(255, 255, 255, 0.5);
      }

      .t-ta-label {
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 500;
        font-family: PingFangSC, PingFang SC;
      }

      .t-ta-value {
        color: #fff7b4;
        font-size: 32rpx;
        font-weight: bold;
        font-family: DINAlternate, DINAlternate;
      }
    }

    .list-con {
      border-radius: 9px;
      background: #fff;
      margin: 20rpx 0;
      overflow: hidden;
    }
  }
</style>
